import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import Nine from './components/Nine'
import Product from './components/Product'
import DescribingTheUi from './views/DescribingTheUi'
import RespondingToEvents from './views/RespondingToEvents'
import SateComponentMemory from './views/SateComponentMemory'
import RenderAndCommit from './views/RenderAndCommit'
import ReferencingValuesWithRefs from './views/hooks/referencing-values-with-refs'
import ManipulatingTheDomWithRefs from './views/hooks/manipulating-the-dom-with-refs.jsx'
import SynchronizingWithEffects from './views/hooks/synchronizing-with-effects.jsx'
import YouMightNotNeedAnEffect from './views/hooks/you-might-not-need-an-effect'
import CustomHooks from './views/hooks/reusing-logic-with-custom-hooks'

/**
 * 手动正确记忆化 依赖关系是很棘手的。
 *    1 优化重新渲染
 *    2
 * 严格模式
 *  1 开发环境保持严格模式，当出现组件不纯粹时，会报错
 *  2 打包后，会移除严格模式
 */
const root = createRoot(document.getElementById('root'))
root.render(
  <StrictMode>
    <CustomHooks />
  </StrictMode>,
)
